<template>
    <div class="content">
        <div class="top_form">
            <el-input v-model="form.communityName" @keyup.enter.native="search" placeholder="小区名称" class="input1"></el-input>
            <el-input v-model="form.unitName" @keyup.enter.native="search" placeholder="单元名称"></el-input>
<!--            <el-date-picker-->
<!--                    v-model="form.createDt"-->
<!--                    type="daterange"-->
<!--                    align="right"-->
<!--                    range-separator="至"-->
<!--                    start-placeholder="开始日期"-->
<!--                    end-placeholder="结束日期"-->
<!--                    class="width-full">-->
<!--            </el-date-picker>-->
            <el-date-picker
                    v-model="form.createDt"
                    align="right"
                    type="date"
                    placeholder="建设时间"
                    :picker-options="pickerOptions"
                    class="width-full">
            </el-date-picker>
            <el-select
                    v-model="form.unitStatus"
                    clearable
                    placeholder="选择状态">
                <el-option v-for="item in statusList"
                           :label="item.text"
                           :key="item.value"
                           :value="item.value">
                </el-option>
            </el-select>
            <el-button id="white_list_search" type="primary" icon="el-icon-search" @click="search"
                       style="margin-left: 80px"></el-button>
            <el-button id="white_list_add" type="success" icon="el-icon-plus" @click="add" class="button2" v-show="this.type == '1'">录入</el-button>
            <el-button type="primary" icon="el-icon-refresh-right" @click="resetForm" class="button3">重置</el-button>
        </div>
        <div class="contain_form">
            <div class="table">
                <el-table
                        :data="tableData"
                        stripe
                        border
                        v-loading="loading"
                        :header-cell-style="{'background':'#eef1f6','color':'#1f2d3d','border-color':'#dfe6ec'}"
                        style="width: 100%;font-size: 14px;color: #1f2d3d">
                    <el-table-column
                            prop="communityname"
                            label="小区名称"
                            align="center"
                            min-width="20%">
                    </el-table-column>
                    <el-table-column
                            prop="unitname"
                            label="单元名称"
                            align="center"
                            min-width="20%">
                    </el-table-column>
                    <el-table-column
                            prop="unitnum"
                            label="栋数"
                            align="center"
                            min-width="12%">
                    </el-table-column>
                    <el-table-column
                            prop="createtime"
                            label="建设时间"
                            :formatter="dateFormat"
                            align="center"
                            min-width="20%">
                    </el-table-column>
                    <el-table-column
                            prop="unitstatus"
                            label="状态"
                            :formatter="typeFormatter"
                            align="center"
                            min-width="13%">
                    </el-table-column>
                    <el-table-column v-if="type === '1'"
                                     label="操作"
                                     min-width="15%"
                                     align="center">
                        <template slot-scope="scope">
                            <div>
                                <el-button :plain="true"
                                           size="mini"
                                           @click="detail(scope.row)"
                                           style="color: #62a8ea;border-radius: 5px"
                                           >详情</el-button>
                                <el-button :plain="true"
                                           size="mini"
                                           @click="deleteData(scope.row, scope.$index)"
                                           style="border-radius: 5px;margin-left: 13px"
                                           type="danger">归档</el-button>
                            </div>
                        </template>
                    </el-table-column>

                    <el-table-column v-else
                                     label="操作"
                                     min-width="15%"
                                     align="center">
                        <template slot-scope="scope">
                            <div>
                                <el-button :plain="true"
                                           size="mini"
                                           @click="detail(scope.row)"
                                           style="color: #62a8ea;border-radius: 5px"
                                >房屋单元详情</el-button>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="block">
                <el-pagination @current-change="handleCurrentChange"
                               layout="total, sizes,prev, pager, next"
                               :current-page.sync="iPagination.current"
                               :page-size='iPagination.pageSize'
                               :page-sizes="iPagination.pageSizeOptions"
                               :total="iPagination.total"
                               background
                               @size-change="handleSizeChange">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
    import dateFunc from '@/utils/dateFunc'
    import moment from 'moment'
    export default {
        name: "index",
        components:{},
        data(){
            return {
                type: '',
                form: {
                    communityName: '',
                    unitName: '',
                    createDt: '',
                    unitStatus: '',
                },
                statusList: [
                    {
                        value: 1,
                        text: '已建成'
                    },
                    {
                        value: 2,
                        text: '未建成'
                    }
                ],
                tableData: [],
                loading: false,
                iPagination: {
                    current: 1,
                    pageSize: 10,
                    pageSizeOptions: [5, 10, 20, 50],
                    total: 0,
                    "page": 0,
                    "pageSize": 10,
                },
                conditions: {
                    pageNo: 1,
                    pageSize: 10,
                    // StatementName: "categoryMgrDAO.selectCatalogItemHistoryBystaffNumber"
                },
                // 时间
                pickerOptions: {
                    disabledDate(time) {
                        return time.getTime() > Date.now();
                    },
                    shortcuts: [{
                        text: '今天',
                        onClick(picker) {
                            picker.$emit('pick', new Date());
                        }
                    }, {
                        text: '昨天',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24);
                            picker.$emit('pick', date);
                        }
                    }, {
                        text: '一周前',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', date);
                        }
                    }]
                }
            }
        },
        created(){
            this.$axiosToken({
                url: '/users/getUserByToken',
                method: 'get',
                data: {},
                success:(result=>{
                    this.type = result.type
                })
            });
        },
        mounted() {
            this.getunitList()
        },
        methods:{
            handleCurrentChange (val) {
                this.iPagination.current = val;
                this.search();
            },
            handleSizeChange (val) {
                this.iPagination.current = 1;
                this.iPagination.pageSize = val;
                this.search();
            },
            // 时间格式转化
            dateFormat(row,column) {
                var date = row[column.property];
                if(date == undefined){
                    return ''
                }else {
                    return moment(date).format("YYYY-MM-DD HH:mm:ss")

                }
            },

            // 获取列表
            getunitList(){
                this.loading = true;
                this.$Axios({
                    url: '/house/gethouseList',
                    method: 'get',
                    data:{
                        pageNum: this.iPagination.pageSize,
                        currPage: this.iPagination.current - 1
                    },
                    success:(result)=>{
                        this.tableData = result.data;
                        this.iPagination.total = result.total;
                        // this.loading = false
                        setTimeout(() => {
                            this.loading = false;
                        }, 200);
                    }
                })

            },
            // 获取搜索参数
            getParams(){
                let createDt = dateFunc.format(this.form.createDt,'YYYY-MM-DD');
                let data = {
                    communityname: this.form.communityName,
                    unitname: this.form.unitName,
                    createDt: createDt,
                    value: this.form.unitStatus,
                    currPage: this.iPagination.current,
                    pageNum: this.iPagination.pageSize,
                }
                return data
            },
            // 搜索
            search(){
                this.loading = true;
                // let data = this.getParams()
                this.$axiosToken({
                    url: '/house/searchList',
                    method: 'get',
                    data:this.getParams(),
                    success: (result)=>{
                        this.tableData = result.data;
                        this.iPagination.total = result.total;
                        setTimeout(() => {
                            this.loading = false;
                        }, 200);
                    }
                })
            },
            resetForm(){
                this.form={
                    communityName: '',
                    unitName: '',
                    createDt: '',
                    unitStatus: '',
                }
                this.search()
            },
            add(){
                this.$router.push({
                    name: 'add',
                    query:{
                        type: 'ADD'
                    }
                })
            },
            detail(row){
                this.$router.push({
                    name: 'add',
                    query:{
                        type: 'DETAIL',
                        detailId: row.id
                    }
                })
            },
            deleteData(row, index){
                this.$confirm('确定删除该单元信息？', '提示', {
                    type: 'warning',
                }).then(()=>{
                    const id = row.id;
                    this.$axiosToken({
                        url: '/house/delunitList',
                        method: 'get',
                        data:{id},
                        success: (result) =>{
                            this.$message({
                                showClose: true,
                                message: '删除房屋单元信息成功',
                                type: 'success'
                            });
                            this.getunitList()
                        }
                    }).catch((reason)=>{
                        alert('删除失败'+reason)
                    })
                })
            },
            // 类型转文字
            typeFormatter(row,column){
                const unitStatus = row.unitstatus
                if (unitStatus == 1){
                    return '已建成'
                }else {
                    return '未建成'
                }
            },

        },
    }
</script>

<style scoped>
    .top_form{
        font-size: 14px;
        width: 100%;
        display: flex;
    }
    /deep/ .el-input__inner{
        font-size: 14px;
        height: 36px;
    }
    .el-button{

    }
    .el-input:nth-child(1){
        width: 18%;
    }
    .el-input:nth-child(2){
        width: 18%;
        margin-left: 10px;
    }
    .width-full{
        width: 18%;
        margin-left: 10px;
    }
    .el-select{
        width: 18%;
        margin-left: 10px;
    }
    .button1,.button2,.button3{
        color: #fff;
        font-size: 14px;
        margin-left: 10px;
        width: 8%;
    }
    /*.el-button{*/
    /*    margin-left: 10px;*/
    /*    width: 8%;*/
    /*}*/
    .contain_form{
        margin-top: 20px;
    }
    .block{
        text-align: right;
        margin: 20px 0;

    }
    /deep/ .el-input.el-input--mini.el-input--suffix>.el-input__inner{
        height: 28px;
    }
</style>